<template>
    <div>
        <el-row>
            <el-form label-width="150px" :model="empu" :rules="rules"
                     ref="recordForm" class="demo-ruleForm">
                <div>
                    <span style="font-weight: 600">基本信息</span>
                    <el-divider></el-divider>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名:" prop="empName">
                            <el-input :disabled="disabled" v-model="empu.empName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生日期:" prop="empBirthdate">
                            <el-input
                                    :disabled="disabled"
                                    v-model="empu.empBirthdate"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width: 350px"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="empSex">
                            <el-radio-group v-model="empu.empSex">
                            <el-radio :disabled="disabled" label="F">男</el-radio>
                            <el-radio :disabled="disabled" label="M">女</el-radio>
                         </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否在职" prop="empWorkstatus">
                            <el-radio-group v-model="empu.empWorkstatus">
                            <el-radio :disabled="disabled" label="Y">在职</el-radio>
                            <el-radio :disabled="disabled" label="N">离职</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="证件类型:" prop="empPaperstype">
                            <el-select placeholder="身份证" :disabled="disabled" v-model="empu.empPaperstype">
                                <el-option label="身份证" value="身份证"></el-option>
                                <el-option label="回乡证" value="回乡证"></el-option>
                                <el-option label="通行证" value="通行证"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证件号:" prop="empPapersnum">
                            <el-input :disabled="disabled" v-model="empu.empPapersnum"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="最高学历:" prop="empHigthEducatio">
                            <el-select placeholder="选择学历" :disabled="disabled" v-model="empu.empHigthEducation">
                                <el-option label="无" value="无"></el-option>
                                <el-option label="初中" value="初中"></el-option>
                                <el-option label="高中" value="高中"></el-option>
                                <el-option label="中技" value="中技"></el-option>
                                <el-option label="中专" value="中专"></el-option>
                                <el-option label="大专" value="大专"></el-option>
                                <el-option label="本科" value="本科"></el-option>
                                <el-option label="双学士" value="双学士"></el-option>
                                <el-option label="硕士" value="硕士"></el-option>
                                <el-option label="博士" value="博士"></el-option>
                                <el-option label="硕士研究生" value="硕士研究生"></el-option>
                                <el-option label="博士研究生" value="博士研究生"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最高学位:" prop="empHigthDegree">
                            <el-select placeholder="选择学位" :disabled="disabled" v-model="empu.empHigthDegree">
                                <el-option label="--请选择学位--" value></el-option>
                                <el-option label="无" value="无"></el-option>
                                <el-option label="学士学位" value="学士学位"></el-option>
                                <el-option label="双学士学位" value="双学士学位"></el-option>
                                <el-option label="硕士学位" value="硕士学位"></el-option>
                                <el-option label="双硕士学位" value="双硕士学位"></el-option>
                                <el-option label="博士学位" value="博士学位"></el-option>
                                <el-option label="双博士学位" value="双博士学位"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="级别:" prop="cwLid">
                            <el-select placeholder="级别" :disabled="disabled" v-model="empu.cwLid">
                                <el-option label="--请选择--" value></el-option>
                                <el-option label="P1" value="1"></el-option>
                                <el-option label="P2" value="2"></el-option>
                                <el-option label="P3" value="3"></el-option>
                                <el-option label="P4" value="4"></el-option>
                                <el-option label="P5" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工资:" prop="cwBasic">
                            <el-input :disabled="disabled" type="number" v-model="empu.cwBasic"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所内身份:">
                            <el-select placeholder="所内身份" :disabled="disabled" v-model="empu.empPosition">
                                <el-option label="无" value="无"></el-option>
                                <el-option label="合伙人" value="合伙人"></el-option>
                                <el-option label="行政主管" value="行政主管"></el-option>
                                <el-option label="股东" value="股东"></el-option>
                                <el-option label="律师" value="律师"></el-option>
                                <el-option label="实习律师" value="实习律师"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="民族:">
                            <el-select placeholder="请选择" :disabled="disabled" v-model="empu.hrNationId">
                                <el-option label="--请选择民族--" value></el-option>
                                <el-option label="汉族" value="汉族"></el-option>
                                <el-option label="壮族" value="壮族"></el-option>
                                <el-option label="蒙古族" value="蒙古族"></el-option>
                                <el-option label="回族" value="回族"></el-option>
                                <el-option label="藏族" value="藏族"></el-option>
                                <el-option label="维吾尔族" value="维吾尔族"></el-option>
                                <el-option label="苗族" value="苗族"></el-option>
                                <el-option label="彝族" value="彝族"></el-option>
                                <el-option label="朝鲜" value="朝鲜"></el-option>
                                <el-option label="满族" value="满族"></el-option>
                                <el-option label="土家族" value="土家族"></el-option>
                                <el-option label="傣族" value="傣族"></el-option>
                                <el-option label="水族" value="水族"></el-option>
                                <el-option label="土族" value="土族"></el-option>
                                <el-option label="高山族" value="高山族"></el-option>
                                <el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="政治面貌:">
                            <el-select placeholder="请选择" :disabled="disabled" v-model="empu.hrPoliticalId">
                                <el-option label="--请选择--" value></el-option>
                                <el-option label="中共党员" value="中共党员"></el-option>
                                <el-option label="中共预备党员" value="中共预备党员"></el-option>
                                <el-option label="共青团员" value="共青团员"></el-option>
                                <el-option label="民革党员" value="民革党员"></el-option>
                                <el-option label="农工党党员" value="农工党党员"></el-option>
                                <el-option label="民建会员" value="民建会员"></el-option>
                                <el-option label="致公党党员" value="致公党党员"></el-option>
                                <el-option label="九三学社社员" value="九三学社社员"></el-option>
                                <el-option label="群众" value="群众"></el-option>
                                <el-option label="无党派人士" value="无党派人士"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="婚姻情况:">
                            <el-select placeholder="请选择" :disabled="disabled" v-model="empu.empMaritalsta">
                                <el-option label="--请选择--" value></el-option>
                                <el-option label="未婚" value="未婚"></el-option>
                                <el-option label="已婚" value="已婚"></el-option>
                                <el-option label="离异" value="离异"></el-option>
                                <el-option label="丧偶" value="丧偶"></el-option>
                                <el-option label="无配偶" value="无配偶"></el-option>
                                <el-option label="同居" value="同居"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="门禁号:">
                            <el-input :disabled="disabled" v-model="empu.empEntrancenum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业部:">
                            <el-select placeholder="请选择" :disabled="disabled" v-model="empu.hrSpecialtyId">
                                <el-option label="--请选择--" value></el-option>
                                <el-option label="行政与政府法律顾问部" value="行政与政府法律顾问部"></el-option>
                                <el-option label="知识产权部" value="知识产权部"></el-option>
                                <el-option label="建筑与房地产专业部" value="建筑与房地产专业部"></el-option>
                                <el-option label="婚姻与家庭专业部" value="婚姻与家庭专业部"></el-option>
                                <el-option label="公司与企业法律顾问部" value="公司与企业法律顾问部"></el-option>
                                <el-option label="金融与担保部" value="金融与担保部"></el-option>
                                <el-option label="劳动与社会保障部" value="劳动与社会保障部"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div>
                    <span style="font-weight: 600">从业资料</span>
                    <el-divider></el-divider>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="执业类别:" prop="hrPractiseId">
                            <el-select placeholder="请选择类别" :disabled="disabled" v-model="empu.hrPractiseId">
                                <el-option label="--请选择类别--" value></el-option>
                                <el-option label="专职" value="专职"></el-option>
                                <el-option label="兼职" value="兼职"></el-option>
                                <el-option label="公司" value="公司"></el-option>
                                <el-option label="公职" value="公职"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="执业证号码:" prop="empPracnum">
                            <el-input :disabled="disabled" v-model="empu.empPracnum"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="首次执业时间:">
                            <el-input
                                    :disabled="disabled"
                                    v-model="empu.empPracdate"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width: 350px"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="首次执业地:">
                            <el-input :disabled="disabled" v-model="empu.empPracsite"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="资格证类别:">
                            <el-select placeholder="请选择类别" :disabled="disabled" v-model="empu.hrCertifyId">
                                <el-option label="--请选择类别--" value></el-option>
                                <el-option label="法律职业资格证" value="法律职业资格证"></el-option>
                                <el-option label="律师职业资格证" value="律师职业资格证"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资格证号码:">
                            <el-input :disabled="disabled" v-model="empu.empCertifynum"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="资格证取得方式:">
                            <el-select placeholder="选择方式" :disabled="disabled" v-model="empu.empGainway">
                                <el-option label="--选择方式--" value></el-option>
                                <el-option label="考试" value="考试"></el-option>
                                <el-option label="考核" value="考核"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资格证取得地:">
                            <el-input :disabled="disabled" v-model="empu.empGainsite"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="个人介绍:">
                            <el-input type="textarea" style="width: 850px" :disabled="disabled" v-model="empu.empIntroduce"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div>
                    <span style="font-weight: 600">入职情况</span>
                    <el-divider></el-divider>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="入职时间:" prop="empEntrydate">
                            <el-input
                                    :disabled="disabled"
                                    v-model="empu.empEntrydate"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width: 350px"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="社保号码:">
                            <el-input :disabled="disabled" v-model="empu.empSocialNum"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="合同开始:" prop="empContStartdate">
                            <el-input
                                    :disabled="disabled"
                                    v-model="empu.empContStartdate"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width: 350px"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="合同截止:" prop="empContEnddate">
                            <el-input
                                    :disabled="disabled"
                                    v-model="empu.empContEnddate"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width: 350px"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否参保:">
                            <el-radio :disabled="disabled" v-model="empu.empInsured" label="是">是</el-radio>
                            <el-radio :disabled="disabled" v-model="empu.empInsured" label="否">否</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div>
                    <span style="font-weight: 600">联系信息</span>
                    <el-divider></el-divider>
                </div>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号码:" prop="empPhone">
                            <el-input :disabled="disabled" maxlength="11" v-model="empu.empPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系地址:" prop="empSite">
                            <el-input :disabled="disabled" v-model="empu.empSite"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="微信号:">
                            <el-input :disabled="disabled" v-model="empu.empWechat"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话:">
                            <el-input :disabled="disabled" maxlength="11"  v-model="empu.empContactPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮箱:">
                            <el-input :disabled="disabled" maxlength="11"  v-model="empu.empEmail"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮政编码:">
                            <el-input :disabled="disabled"  v-model="empu.empPostcode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="QQ号码:">
                            <el-input :disabled="disabled" maxlength="11"  v-model="empu.empQq"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="照片:" prop="empPicture">
                            <!-- 文件上传 -->
                                <el-upload
                                        class="upload-demo"
                                        ref="upload"
                                        name="multipartfile"
                                        action="http://localhost/upload"
                                        :headers="{token:this.$store.state.token}"
                                        :data="{folder:'HrEmp'}"
                                        :on-success="handleUploadSuccess"
                                        :auto-upload="false">
                                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                                </el-upload>

                            <!--写一个隐藏框 来储存路径 属性名称 notices.noticeFile-->
                            <el-input v-model="empu.empPicture" v-show="false"></el-input>
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="empu.empPicture"
                                    fit="'fill', 'contain', 'cover', 'none', 'scale-down'"></el-image>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="AddHrEmp('recordForm')" :disabled="disable">确认提交</el-button>
                    <el-button @click="coles">取消</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    export default {
        props:["empById","tue","ada"],
        data(){
            var empName = (rule, value, callback) => {
                value=this.empu.empName;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请填写姓名'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empBirthdate = (rule, value, callback) => {
                value=this.empu.empBirthdate;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择日期'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empSex = (rule, value, callback) => {
                value=this.empu.empSex;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择性别'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empWorkstatus = (rule, value, callback) => {
                value=this.empu.empWorkstatus;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择在职状态'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empPaperstype = (rule, value, callback) => {
                value=this.empu.empPaperstype;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择证件'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empPapersnum = (rule, value, callback) => {
                value=this.empu.empPapersnum;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请填写证件号'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empHigthEducatio = (rule, value, callback) => {
                value=this.empu.empHigthEducation;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请填写最高学历'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empHigthDegree = (rule, value, callback) => {
                value=this.empu.empHigthDegree;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择最高学位'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var hrPractiseId = (rule, value, callback) => {
                value=this.empu.hrPractiseId;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择执业类型'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empPracnum = (rule, value, callback) => {
                value=this.empu.empPracnum;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请填写执业证号'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empEntrydate = (rule, value, callback) => {
                value=this.empu.empEntrydate;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择入职时间'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empContStartdate = (rule, value, callback) => {
                value=this.empu.empContStartdate;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择合同开始日期'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empContEnddate = (rule, value, callback) => {
                value=this.empu.empContEnddate;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择合同截至日期'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empPhone = (rule, value, callback) => {
                value=this.empu.empPhone;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请填写手机号码'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empSite = (rule, value, callback) => {
                value=this.empu.empSite;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请填写地址'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var cwLid = (rule, value, callback) => {
                value=this.empu.cwLid;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请选择级别'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            var empPicture = (rule, value, callback) => {
                value=this.empu.empPicture;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请上传照片'));
                } else {
                    callback();
                    this.disable=false;
                }
            }; var cwBasic = (rule, value, callback) => {
                value=this.empu.cwBasic;
                if (!value) {
                    this.disable=true;
                    callback(new Error('请输入工资'));
                } else {
                    callback();
                    this.disable=false;
                }
            };

            return{
                disable:true,
                empu: JSON.parse(JSON.stringify(this.empById)),//父类传来的数据
                ad: JSON.parse(JSON.stringify(this.ada)),//父类传来的数据
                disabled:this.tue,
                rules: {
                    empName: [{ required: true,validator: empName, trigger: 'blur' }],
                    empBirthdate: [{ required: true,validator: empBirthdate, trigger: 'blur' }],
                    empSex: [{ required: true,validator: empSex, trigger: 'blur' }],
                    empWorkstatus: [{ required: true,validator: empWorkstatus, trigger: 'blur' }],
                    empPaperstype: [{ required: true,validator: empPaperstype, trigger: 'change' }],
                    empPapersnum: [{ required: true,validator: empPapersnum, trigger: 'change' }],
                    empHigthEducatio: [{ required: true,validator: empHigthEducatio, trigger: 'change' }],
                    empHigthDegree: [{ required: true,validator: empHigthDegree, trigger: 'change' }],
                    hrPractiseId: [{ required: true,validator: hrPractiseId, trigger: 'change' }],
                    empPracnum: [{ required: true,validator: empPracnum, trigger: 'blur' }],
                    empEntrydate: [{ required: true,validator: empEntrydate, trigger: 'blur' }],
                    empContStartdate: [{ required: true,validator: empContStartdate, trigger: 'blur' }],
                    empContEnddate: [{ required: true,validator: empContEnddate, trigger: 'blur' }],
                    empPhone: [{ required: true,validator: empPhone, trigger: 'blur' }],
                    empSite: [{ required: true,validator: empSite, trigger: 'blur' }],
                    empPicture: [{ required: true,validator: empPicture, trigger: 'blur' }],
                    cwLid: [{ required: true,validator: cwLid, trigger: 'change' }],
                    cwBasic:[{ required: true,validator: cwBasic, trigger: 'blur' }],
                }
            };

        },
        created() {

        },
        methods: {
            handleUploadSuccess(response){
                console.log(response)
                this.empu.empPicture=response.data;
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            coles(){
                this.$emit("coles",this.ad=1);
            },
            AddHrEmp(formName) {
                console.log(this.empu)
                this.$refs[formName].validate((valid) => {
                    console.log(valid)
                    if (valid) {
                        console.log(this.empu)
                        this.$emit('AddHrEmp',this.empu);

                        this.empu={};
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }


    };
</script>


<style scoped>
    .app {
        height: 200px;
    }
    .el-input {
        width: 350px;
    }
    .el-select {
        width: 350px;
    }
    .case-no {
        width: 100px;
    }
    .lawyer {
        width: 200px;
    }
    .el-breadcrumb {
        font-size: 20px;
    }
</style>
